<template>
  <div style="width: 80%">
    <el-form :inline="true" :model="form" :rules="rules" label-width="100px">
      <el-form-item>
        <span class="title">编辑用户</span>
      </el-form-item>

      <el-form-item label="头像修改" style="width: 500px; margin-left: 25px">
        <!-- 修改头像开始 -->
        <el-upload
          class="avatar-uploader"
          action="http://1.12.249.140:9090/file/userimage"
          :show-file-list="false"
          accept="image/*"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- 修改头像结束 -->
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="form.userName" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.nikeName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio
          v-model="form.gender"
          label="1"
          @click="($event) => (form.gender = '1')"
          >男</el-radio
        >
        <el-radio
          v-model="form.gender"
          label="0"
          @click="($event) => (form.gender = '0')"
          >女</el-radio
        >
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center; margin-top: 30px; margin-left: 310px">
          <el-button type="primary" @click="save" size="medium">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Editmsg",
  data() {
    return {
      form: {},
      rules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
      imageUrl: "",
      // radio: "1",
      //获取localStorage中保存的后台返回的用户信息
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
    };
  },
  created() {
    // const id = this.$route.query.id;
    // request.get("/user/" + id).then((res) => {
    this.form = this.user;
    // 后端传过来是number型，而el-radio的v-model绑定的是String型，所以要转化一下
    this.form.gender = String(this.form.gender);
    console.log(this.user);
    // });
  },
  methods: {
    save() {
      request.put("/user", this.form).then((res) => {
        if (res.code === 200) {
          this.$notify.success("更新成功");
          localStorage.setItem("user", JSON.stringify(res.data)); // 存储用户信息到浏览器
          // 更新完后跳转
          this.$router.push("/personal");
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    // 上传头像
    handleAvatarSuccess(res, file) {
      // res就是文件的路径
      if (res.code === 200) {
        this.form.avatarUrl = res.data;
      } else {
        this.$notify.error(res.msg);
      }
    },
  },
};
</script>

<style scoped>
.el-form {
  margin-top: 100px;
  margin-left: 350px;
  width: 650px;
  border-radius: 8px;
  box-shadow: 5px 4px 14px #bebebe, -20px -20px 60px #ffffff;
  padding: 35px 100px 40px;
}
.el-form--inline .el-form-item {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
  margin-left: -20px;
}
.title {
  color: #333;
  font-size: 32px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
  margin-left: 290px;
}
/* 上传头像开始 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 上传头像结束 */
</style>